<div id="warnings">

  <!-- ko if: warnings().length > 0-->
    <div class="warning" data-bind="css:{'warning-dimmed': warningDimmed}">
      <!-- ko if: visibleWarning() === z.viewModel.WarningsViewModel.TYPE.REQUEST_CAMERA -->
        <div class="warning-bar warning-bar-feature bg-theme">
          <div class="warning-bar-message" data-bind="l10n_html: {'id': z.string.warningPermissionRequestCamera, 'substitute': '<span class=\'warning-bar-icon icon-camera\'></span>'}"></div>
          <span class="warning-bar-close icon-close button-icon" data-bind="click: closeWarning"></span>
        </div>
      <!-- /ko -->

      <!-- ko if: visibleWarning() === z.viewModel.WarningsViewModel.TYPE.DENIED_CAMERA -->
        <div class="warning-bar warning-bar-feature bg-theme">
          <div class="warning-bar-message">
            <span data-bind="l10n_text: z.string.warningPermissionDeniedCamera"></span>&nbsp;
            <a class="warning-bar-link" data-bind="l10n_href: {support: z.config.SUPPORT.ID.CAMERA_ACCESS_DENIED}, l10n_text: z.string.warningLearnMore" rel="nofollow noopener noreferrer" target="_blank"></a>
          </div>
          <span class="warning-bar-close icon-close button-round button-round-dark" data-bind="click: closeWarning"></span>
        </div>
      <!-- /ko -->

      <!-- ko if: visibleWarning() === z.viewModel.WarningsViewModel.TYPE.REQUEST_MICROPHONE -->
        <div class="warning-bar warning-bar-feature bg-theme">
          <div class="warning-bar-message" data-bind="l10n_html: {'id': z.string.warningPermissionRequestMicrophone, 'substitute': '<span class=\'warning-bar-icon icon-microphone\'></span>'}"></div>
          <span class="warning-bar-close icon-close button-round button-round-dark" data-bind="click: closeWarning"></span>
        </div>
      <!-- /ko -->

      <!-- ko if: visibleWarning() === z.viewModel.WarningsViewModel.TYPE.DENIED_MICROPHONE -->
        <div class="warning-bar warning-bar-feature bg-theme">
          <div class="warning-bar-message">
            <span data-bind="l10n_text: z.string.warningPermissionDeniedMicrophone"></span>&nbsp;
            <a class="warning-bar-link" rel="nofollow noopener noreferrer" target="_blank" data-bind="l10n_href: {support: z.config.SUPPORT.ID.MICROPHONE_ACCESS_DENIED}, l10n_text: z.string.warningLearnMore"></a>
          </div>
          <span class="warning-bar-close icon-close button-round button-round-dark" data-bind="click: closeWarning"></span>
        </div>
      <!-- /ko -->

      <!-- ko if: visibleWarning() === z.viewModel.WarningsViewModel.TYPE.REQUEST_SCREEN -->
        <div class="warning-bar warning-bar-feature bg-theme">
          <div class="warning-bar-message" data-bind="l10n_html: {'id': z.string.warningPermissionRequestScreen, 'substitute': '<span class=\'warning-bar-icon icon-screensharing\'></span>'}"></div>
          <span class="warning-bar-close icon-close button-icon" data-bind="click: closeWarning"></span>
        </div>
      <!-- /ko -->

      <!-- ko if: visibleWarning() === z.viewModel.WarningsViewModel.TYPE.DENIED_SCREEN -->
        <div class="warning-bar warning-bar-feature bg-theme">
          <div class="warning-bar-message">
            <span data-bind="l10n_text: z.string.warningPermissionDeniedScreen"></span>&nbsp;
            <a class="warning-bar-link" rel="nofollow noopener noreferrer" target="_blank" data-bind="l10n_href: {support: z.config.SUPPORT.ID.SCREEN_ACCESS_DENIED}, l10n_text: z.string.warningLearnMore"></a>
          </div>
          <span class="warning-bar-close icon-close button-round button-round-dark" data-bind="click: closeWarning"></span>
        </div>
      <!-- /ko -->

      <!-- ko if: visibleWarning() === z.viewModel.WarningsViewModel.TYPE.NOT_FOUND_CAMERA -->
        <div class="warning-bar warning-bar-feature bg-theme">
          <div class="warning-bar-message">
            <span data-bind="l10n_text: z.string.warningNotFoundCamera"></span>&nbsp;
            <a class="warning-bar-link" rel="nofollow noopener noreferrer" target="_blank" data-bind="l10n_href: {support: z.config.SUPPORT.ID.DEVICE_NOT_FOUND}, l10n_text: z.string.warningLearnMore"></a>
          </div>
          <span class="warning-bar-close icon-close button-round button-round-dark" data-bind="click: closeWarning"></span>
        </div>
      <!-- /ko -->

      <!-- ko if: visibleWarning() === z.viewModel.WarningsViewModel.TYPE.NOT_FOUND_MICROPHONE -->
        <div class="warning-bar warning-bar-feature bg-theme">
          <div class="warning-bar-message">
            <span data-bind="l10n_text: z.string.warningNotFoundMicrophone"></span>&nbsp;
            <a class="warning-bar-link" rel="nofollow noopener noreferrer" target="_blank" data-bind="l10n_href: {support: z.config.SUPPORT.ID.DEVICE_NOT_FOUND}, l10n_text: z.string.warningLearnMore"></a>
          </div>
          <span class="warning-bar-close icon-close button-round button-round-dark" data-bind="click: closeWarning"></span>
        </div>
      <!-- /ko -->

      <!-- ko if: visibleWarning() === z.viewModel.WarningsViewModel.TYPE.REQUEST_NOTIFICATION -->
        <div class="warning-bar warning-bar-feature bg-theme">
          <div class="warning-bar-message"
               data-bind="l10n_html: {'id': z.string.warningPermissionRequestNotification, 'substitute': '<span class=\'warning-bar-icon icon-envelope\'></span>'}"></div>
          <span class="warning-bar-close icon-close button-round button-round-dark"
                data-bind="click: closeWarning"
                data-uie-name="do-close-warning"></span>
        </div>
      <!-- /ko -->

      <!-- ko if: visibleWarning() === z.viewModel.WarningsViewModel.TYPE.UNSUPPORTED_INCOMING_CALL -->
        <div class="warning-bar warning-bar-feature bg-theme">
          <!-- ko ifnot: z.util.Environment.browser.chrome -->
            <div class="warning-bar-message"><span data-bind="l10n_text: {'id': z.string.warningCallUnsupportedIncoming, substitute: z.util.escape_html(firstName())}"></span>&nbsp;<a class="warning-bar-link" rel="nofollow noopener noreferrer" target="_blank" data-bind="l10n_href: {support: z.config.SUPPORT.ID.CALLING}, l10n_text: z.string.warningLearnMore"></a></div>
          <!-- /ko -->
          <!-- ko if: z.util.Environment.browser.chrome -->
            <!-- ko if: z.util.Environment.desktop -->
              <div class="warning-bar-message">
                <span data-bind="l10n_text: z.string.warningCallIssues"></span>&nbsp;
                <a class="warning-bar-link" rel="nofollow noopener noreferrer" target="_blank" data-bind="l10n_href: {type: z.util.URLUtil.TYPE.WEBAPP, path: z.string.urlWebappRoot}, l10n_text: z.string.wire_for_web"></a>
              </div>
            <!-- /ko -->
            <!-- ko ifnot: z.util.Environment.desktop -->
              <div class="warning-bar-message"><span data-bind="l10n_text: z.string.warningCallUpgradeBrowser"></span></div>
            <!-- /ko -->
          <!-- /ko -->
          <span class="warning-bar-close icon-close button-round button-round-dark" data-bind="click: closeWarning"></span>
        </div>
      <!-- /ko -->

      <!-- ko if: visibleWarning() === z.viewModel.WarningsViewModel.TYPE.UNSUPPORTED_OUTGOING_CALL -->
        <div class="warning-bar warning-bar-feature bg-theme">
          <!-- ko ifnot: z.util.Environment.browser.chrome -->
            <div class="warning-bar-message">
              <span data-bind="l10n_text: z.string.warningCallUnsupportedOutgoing"></span>&nbsp;
              <a class="warning-bar-link" rel="nofollow noopener noreferrer" target="_blank" data-bind="l10n_href: {support: z.config.SUPPORT.ID.CALLING}, l10n_text: z.string.warningLearnMore"></a>
            </div>
          <!-- /ko -->
          <!-- ko if: z.util.Environment.browser.chrome -->
            <!-- ko if: z.util.Environment.desktop -->
              <div class="warning-bar-message">
                <span data-bind="l10n_text: z.string.warningCallIssues"></span>&nbsp;
                <a class="warning-bar-link" rel="nofollow noopener noreferrer" target="_blank" data-bind="l10n_href: {type: z.util.URLUtil.TYPE.WEBAPP, path: z.string.urlWebappRoot}, l10n_text: z.string.wire_for_web"></a>
              </div>
            <!-- /ko -->
            <!-- ko ifnot: z.util.Environment.desktop -->
              <div class="warning-bar-message"><span data-bind="l10n_text: z.string.warningCallUpgradeBrowser"></span></div>
            <!-- /ko -->
          <!-- /ko -->
          <span class="warning-bar-close icon-close button-round button-round-dark" data-bind="click: closeWarning"></span>
        </div>
      <!-- /ko -->

      <!-- ko if: visibleWarning() === z.viewModel.WarningsViewModel.TYPE.CONNECTIVITY_RECONNECT -->
        <div class="warning-bar warning-bar-connection bg-theme">
          <div class="warning-bar-message">
            <span data-bind="l10n_text: z.string.warningConnectivityConnectionLost"></span>
            <svg class="warning-bar-spinner spin" width="11" height="11" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" data-uie-name="status-loading">
              <path fill="#fff" d="M12.416 12.417c-2.374 2.375-6.28 2.33-8.72-.112-2.444-2.442-2.488-6.347-.113-8.72 1.658-1.66 4.12-2.18 6.343-1.394.477.17 1-.08 1.17-.557.167-.477-.083-1-.56-1.17C7.658-.552 4.453.124 2.286 2.29-.808 5.384-.75 10.448 2.4 13.6c3.15 3.152 8.216 3.21 11.312.113 2.165-2.166 2.84-5.37 1.824-8.25-.168-.476-.692-.726-1.17-.558-.476.17-.726.692-.557 1.17.784 2.222.265 4.684-1.394 6.342z"></path>
            </svg>
          </div>
        </div>
      <!-- /ko -->

      <!-- ko if: visibleWarning() === z.viewModel.WarningsViewModel.TYPE.CONNECTIVITY_RECOVERY -->
        <div class="warning-bar warning-bar-progress"></div>
      <!-- /ko -->

      <!-- ko if: visibleWarning() === z.viewModel.WarningsViewModel.TYPE.NO_INTERNET -->
        <div class="warning-bar warning-bar-connection bg-theme">
          <div class="warning-bar-message" data-bind="l10n_text: z.string.warningConnectivityNoInternet"></div>
        </div>
      <!-- /ko -->

      <!-- ko if: visibleWarning() === z.viewModel.WarningsViewModel.TYPE.LIFECYCLE_UPDATE -->
        <div class="warning-bar warning-bar-connection bg-theme">
          <div class="warning-bar-message">
            <span data-bind="l10n_text: z.string.warningLifecycleUpdate"></span>&nbsp;
            <a class="warning-bar-link" href="https://medium.com/wire-news/desktop-updates" data-bind="l10n_text: z.string.warningLifecycleUpdateNotes" rel="nofollow noopener noreferrer" target="_blank"></a>&nbsp;·&nbsp;
            <a class="warning-bar-link" data-bind="click: function(){amplify.publish(z.event.WebApp.LIFECYCLE.REFRESH)}, l10n_text: z.string.warningLifecycleUpdateLink" rel="nofollow noopener noreferrer" target="_blank"></a>
          </div>
        </div>
      <!-- /ko -->
    </div>
  <!-- /ko -->

</div>
